<style>
    .preview-area{
        width: 100%;
        text-align: center;
        margin: 10px 0;
        background-color: #333;
        color: #fff;
    }
    .preview-area img{
        max-width: 100%;
    }

    .img-src p{
        margin-bottom: 10px;
    }
</style>
<div class="layui-tab layui-tab-brief tool-tab" lay-filter="tool-tab">
    <ul class="layui-tab-title text-center">
        <li class="layui-this">{$tool_info.title}</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-row">
                <blockquote class="layui-elem-quote tools-title">
                    <p>说明：</p>
                    <ol>
                        <li>这里的上传的图片是不会存储在本站的，返回的接口请自己保存，如果图片地址失效，可能被存储运营商删除，请注意您的图片重要性，以防不必要的争议。</li>
                        <li>请不要违反任何会触发中国宪法的图片，望自珍重。</li>
                        <li>允许上传图片格式(jpg|png|gif|bmp|jpeg)，最大上传(5M)。</li>
                    </ol>
                </blockquote>
                <div class="layui-tab layui-tab-card" lay-filter="demo">
                    <ul class="layui-tab-title">
                        <li class="layui-this" data-type="lmtc">柠檬图床</li>
                        <li data-type="bdtc">百度图床</li>
                        <li data-type="xltc">新浪图床</li>
                        <li data-type="txtc">腾讯图床</li>
                    </ul>
                </div>
                <div class="upload-area text-center">
                    <div class="preview-area">点击下方按钮选择需要上传的图片</div>
                    <div class="img-src"></div>
                    <div class="layui-progress" lay-filter="progress_upload">
                        <div class="layui-progress-bar" lay-percent="0%"></div>
                    </div>
                    <button type="button" id="upload" class="layui-btn layui-btn-sm layui-btn-normal">选择图片上传(<span class="font-red" id="spaceType">lmtc</span>)</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'layer','upload','element','code'], function () {
        var $ = layui.jquery,
            l = layui.layer,
            U = layui.upload,
            E = layui.element,
            choType = 'lmtc';

        E.on('tab(demo)', function(data){
            choType = $(this).data('type');
            $('#spaceType').html(choType);

            var uploadInst = U.render({
                elem: '#upload'
                ,url: '/api/imgbed/index/type/'+choType
                ,exts: 'jpg|png|gif|bmp|jpeg'
                ,size: '5120'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        var img = '<img src="'+result+'" alt="preview" />';
                        $('.preview-area').html(img);
                    });

                    E.progress('progress_upload', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code === 0){
                        layer.msg('上传失败');
                        $this.parent().find('.preview').html('请重新点击下方按钮选择需要上传的图片'); //置空上传失败的状态
                        return false;
                    }
                    //上传成功的一些操作
                    $('.img-src').html('<p>'+ res.data.src +'</p>');
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    layer.confirm('<span style="color: #FF5722;">上传失败</span>，是否重试？',function (index){
                        uploadInst.upload();
                        layer.close(index);
                    });
                }
                //进度条
                ,progress: function(n, index, e){
                    E.progress('progress_upload', n + '%'); //可配合 layui 进度条元素使用
                    if(n === 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });
    });
</script>